<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
</head>
<body>
<!--元素外边距
指的是元素边框和元素边框之间的距离
属性：
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距-->
<style>
    .red{
        background-color: lime;
        border: red 1px solid;
    }
    .margin{
        margin-left: 50px;
        background-color: lime;
        border: red 1px solid;
    }
</style>

<span class="red"> 无外边距的div </span>
<span class="red"> 无外边距的div </span><br>
<span class="red"> 无外边距的div </span>
<span class="margin"> 有外边距的div </span>
</body>
</html>